<template>
  <div class="my-stat">
    <div>
      <div class="title-row">
        <div class="flex item-center">
          <div class="label-line"></div>
          <span class="title">我的待办</span>
        </div>
        <div class="line"></div>
        <div class="flex">
          <el-input
            size="small"
            placeholder="搜索标题"
            suffix-icon="el-icon-search"
            v-model="request.eventName"
            @keyup.enter.native="getList"
          ></el-input>
        </div>
      </div>
      <div class="date-picker">
        <span>受理日期：</span>
        <el-date-picker
          size="small"
          v-model="timeHorizon"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          v-on:change="onChange(timeHorizon)"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <ul class="card-ul">
        <li class="card-list"  @click="openDialog(item.eventStatus==0?'toAcceptDialog':'ProcessingDialog',{item})" v-for="(item,index) in dataList" :key="index">
          <div class="img-parent">
            <img :src="require(`../../assets/pigeonholes/source${item.eventSourceCode}.png`)" alt>
          </div>
          <div class="main">
            <div class="title">{{item.eventName}}</div>
            <div class="text">
              <div class="text-item">
                <span>来源：</span>
                <span>{{item.eventSourceName}}</span>
              </div>
              <div class="text-item">
                <span>上报时间：</span>
                <span>{{getTimeStr(item.createTime)||'-'}}</span>
              </div>
            </div>
          </div>
          <div class="tag ing">{{item.eventStatusName}}</div>
        </li>
        <div v-if="!dataList.length" class="no-data">
          <img src="../../assets/no-data.png" alt>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
import { sortingEventinfoQueryCorePage } from "../../config/api";
import Pubsub from "../../utils/pubsub";
import {getTimeStr} from "../../utils/index";
export default {
  data() {
    return {
      getTimeStr,
      dataList: [],
      timeHorizon: "",
      time: "",
      request: {
        pageNum: 1,
        pageSize: 10,
        module: "workbench",
        eventName: "",
        startTime: "",
        endTime: ""
      }
    };
  },
  mounted() {
    this.getList();
    //SORT_CENTER_TODO分拣转发--我的待办ws
    this.pubsub_token1 = Pubsub.subscribe("SORT_CENTER_TODO", () => {
      this.getList();
    });
  },
  destroyed() {
    this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
  },
  methods: {
    /**
     * 请求统计数据
     */
    getList() {
      sortingEventinfoQueryCorePage(this.request).then((res = {}) => {
        this.dataList = res.rows || [];
      });
    },
    onChange(e) {
      //日期change事件
      if (e) {
        this.request.startTime = e[0];
        this.request.endTime = e[1];
      } else {
        this.request.startTime = "";
        this.request.endTime = "";
      }
      this.getList();
    },
    openDialog(type, values) {
      	Pubsub.publish(type, values);
    },
  }
};
</script>

<style lang = "scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";
.no-data{
  margin-top: 10vh;
}
.my-stat > div {
  padding: 15px;
}
.card-ul {
  max-height: 100vh;
  overflow-y: auto;
}
.card-list {
  position: relative;
  margin-top: 10px;
  display: flex;
  padding: 15px;
  background-color: #f2f3ff;
  align-items: center;
  cursor: pointer;
  .img-parent {
    height: 70px;
    overflow: hidden;
    background-color: #fff;
    width: 70px;
    margin-right: 18px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .main {
    flex: 1;
    display: flex;
    flex-flow: row wrap;
    align-content: space-around;
    height: 70px;
    .title {
      color: #1a36a9;
      /* margin-bottom: 14px; */
    }
    .text {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .text-item {
        font-size: 12px;
        color: #666;
        span {
          &:first-child {
            font-size: 10px;
            color: #999;
          }
        }
      }
    }
  }
  .tag {
    position: absolute;
    top: 0;
    right: 10px;
    color: #fff;
    background-color: #1a36a9;
    font-size: 12px;
    padding: 4px 12px;
  }
  .ing {
    background-color: #2b88ff;
  }
}
.date-picker {
  display: flex;
  align-items: center;
  margin-top: 10px;
  span {
    width: 70px;
  }
  div {
    /* flex: 1; */
    width: 70%;
  }
}
</style>
<style>
.my-stat .el-badge__content.is-fixed {
  background: red;
  right: 37px;
}
.my-stat .el-badge {
  height: 18px;
}
</style>
